<!DOCTYPE html>

<html class="no-js">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title></title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://cdn.staticfile.org/axios/0.19.0-beta.1/axios.js"></script>
    <script src="https://cdn.staticfile.org/vue/2.5.17/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jsplumb@2.9.2/dist/js/jsplumb.min.js"></script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.13.0/theme-chalk/index.css" />
    <script src="https://cdn.staticfile.org/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
    
    <script src="https://cdn.staticfile.org/element-ui/2.13.0/index.js"></script>
    <script src="http://beevue.cn/cli/edittable.js"></script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/animate.css/3.7.0/animate.min.css" />
    <link rel="stylesheet" href="../../../lib/index.css" />
    <script src="../../../lib/bee.js"></script>
</head>

<body>
    <div id="app">
        <bee-edit-table 
        :tableid="tableid" 
        :tableobj="tableobj"></bee-edit-table>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                tableid: 'bee-edit-table',
                tableobj: {
                    data: [],
                    colHeaders: ["Brand<br><b>(non-sortable)</b>", "Model", "Max speed<br>(in miles per hour)", "Range<br>(in miles)", "Seats", "Price", "Start of<br>production"],
                    columns: [{
                        data: 'brand', // 1st column is simple text, no special options here
                        columnSorting: {
                        indicator: false,
                        headerAction: false,
                        compareFunctionFactory: function compareFunctionFactory() {
                            return function comparator() {
                            return 0; // Don't sort the first visual column.
                            };
                        }
                        }
                    }, {
                        data: 'model'// 2nd column is simple text, no special options here
                    }, {
                        data: 'maxSpeed',
                        type: 'numeric'
                    }, {
                        data: 'range',
                        type: 'numeric'
                    }, {
                        data: 'seats',
                        type: 'numeric'
                    },  {
                        data: 'available',
                        type: 'checkbox'
                    }, {
                        data: 'price',
                        type: 'numeric',
                        numericFormat: {
                        pattern: '$ 0,0.00',
                        culture: 'en-US'
                        }
                    }, {
                        data: 'productionDate',
                        type: 'date',
                        dateFormat: 'MM/DD/YYYY',
                        correctFormat: true,
                        defaultDate: '01/01/2000'
                    }],
                    columnSorting: true
                }
            }
        },
        computed: {
        },
        mounted() {
           
           setTimeout(() => {
               this.tableobj.data = [
                           {brand:'BYD', model:'223', maxSpeed: 222, range: 12, seats: 13, available: true, price: '$ 99', productionDate: '01/01/2200'},
                           {brand:'BYD', model:'224', maxSpeed: 222, range: 12, seats: 13, available: false,  price: '$ 99', productionDate: '01/01/2201'},
                           {brand:'BYD', model:'225', maxSpeed: 222, range: 12, seats: 13, available: true,  price: '$ 99', productionDate: '11/01/2200'},
                       ]
           
           setTimeout(() => {
               this.tableobj.data = [
                           {brand:'BYD2', model:'223', maxSpeed: 222, range: 12, seats: 13, available: true, price: '$ 99', productionDate: '01/01/2200'},
                           {brand:'BYD3', model:'224', maxSpeed: 222, range: 12, seats: 13, available: false,  price: '$ 99', productionDate: '01/01/2201'},
                           {brand:'BYD4', model:'225', maxSpeed: 222, range: 12, seats: 13, available: true,  price: '$ 99', productionDate: '11/01/2200'},
                       ]
           }, 2000);
        }, 100);
        },
    })
</script>

</html>